<template>
  <div class="dashboard">
    <div class="grid-container">
      <div class="grid-item">
        <h2>总销售额</h2>
        <div id="totalSalesChart" style="width: 100%; height: 400px;"></div>
      </div>
      <div class="grid-item">
        <h2>每日销量趋势</h2>
        <div id="dailySalesChart" style="width: 100%; height: 400px;"></div>
      </div>
      <div class="grid-item">
        <h2>商品销量分布</h2>
        <div id="productSalesChart" style="width: 100%; height: 400px;"></div>
      </div>
      <div class="grid-item">
        <h2>用户行为分析</h2>
        <div id="userBehaviorChart" style="width: 100%; height: 400px;"></div>
      </div>
      <!-- 移除了用户地理分布的部分 -->
      <div class="grid-item">
        <h2>支付方式统计</h2>
        <div id="paymentMethodChart" style="width: 100%; height: 400px;"></div>
      </div>
      <div class="grid-item">
        <h2>用户分布</h2>
        <div id="userDistributionChart" style="width: 100%; height: 400px;"></div>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'SalesVisualization',
  data() {
    return {
      // 模拟数据
      totalSales: 9000,
      dailySales: [120, 132, 101, 134, 90, 230, 210],
      productSales: [
        {name: '电子产品', value: 450},
        {name: '服装', value: 300},
        {name: '书籍', value: 250},
        {name: '家居', value: 150},
        {name: '食品', value: 100}
      ],
      userBehavior: [
        {name: '浏览商品', value: 15000},
        {name: '添加购物车', value: 8000},
        {name: '下单', value: 3000},
        {name: '完成支付', value: 1500}
      ],
      paymentMethods: [
        {name: '微信支付', value: 50},
        {name: '支付宝', value: 30},
        {name: '银行卡', value: 10},
        {name: '现金', value: 5},
        {name: '其他', value: 5}
      ],
      // ... 其他数据
      userDistribution: [
        {name: '北京', value: 100},
        {name: '上海', value: 80},
        {name: '广州', value: 60},
        {name: '深圳', value: 50},
        {name: '成都', value: 40}
      ]
    }
  },
  mounted() {
    this.initTotalSalesChart();
    this.initDailySalesChart();
    this.initProductSalesChart();
    this.initUserBehaviorChart();
    this.initPaymentMethodChart();
    this.initUserDistributionBar();
  },
  methods: {
    initUserDistributionBar() {
      const chart = echarts.init(document.getElementById('userDistributionChart'));
      chart.setOption({
        title: {
          text: '用户分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['北京', '上海', '广州', '深圳', '成都'] // 城市名称
        },
        yAxis: {
          type: 'value',
          name: '用户数量'
        },
        series: [{
          name: '用户数量',
          type: 'bar',
          data: [100, 80, 60, 50, 40] // 对应城市的用户数量
        }]
      });
    },
    initTotalSalesChart() {
      console.log(echarts)
      const chart = echarts.init(document.getElementById('totalSalesChart'));
      chart.setOption({
        series: [{
          type: 'gauge',
          min: 0,
          max: 20000,
          data: [{value: this.totalSales, name: '总销售额'}],
          axisLine: {
            lineStyle: {
              width: 30,
              color: [[0.1, '#ff4500'], [0.5, '#4169e1'], [1, '#32cd32']]
            }
          }
        }]
      });
    },
    initDailySalesChart() {
      const chart = echarts.init(document.getElementById('dailySalesChart'));
      chart.setOption({
        title: {
          text: '每日销量趋势'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.dailySales,
          type: 'line',
          smooth: true
        }]
      });
    },
    initProductSalesChart() {
      const chart = echarts.init(document.getElementById('productSalesChart'));
      chart.setOption({
        title: {
          text: '商品销量分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [{
          name: '销量',
          type: 'pie',
          radius: '55%',
          data: this.productSales,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
    },
    initUserBehaviorChart() {
      const chart = echarts.init(document.getElementById('userBehaviorChart'));
      chart.setOption({
        title: {
          text: '用户行为分析'
        },
        tooltip: {},
        xAxis: {
          data: this.userBehavior.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '次数',
          type: 'bar',
          data: this.userBehavior.map(item => item.value)
        }]
      });
    },
    // 移除了initUserGeoDistribution方法
    initPaymentMethodChart() {
      const chart = echarts.init(document.getElementById('paymentMethodChart'));
      chart.setOption({
        title: {
          text: '支付方式统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '支付方式',
            type: 'pie',
            radius: '55%',
            data: this.paymentMethods,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
  font-family: 'Roboto', sans-serif; /* 使用更现代的字体 */
  color: #e0e0e0; /* 文字颜色为淡灰色 */
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #f5f5f5; /* 标题颜色为淡白色 */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.grid-item {
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

.grid-item h2 {
  margin-bottom: 10px;
  color: #9e9e9e; /* 标题颜色 */
  font-size: 18px;
  font-weight: 500;
}

/* 图表样式 */
:deep(.echarts) {
  background-color: #2c2c2f; /* 图表背景色 */
}

:deep(.echarts .axis-label) {
  fill: #e0e0e0; /* 轴标签颜色 */
}

:deep(.echarts .grid-line) {
  stroke: #5a5a5a; /* 网格线颜色 */
}

:deep(.echarts .series-line) {
  stroke: #4169e1; /* 线条图颜色 */
  stroke-width: 2px;
}

:deep(.echarts .series-bar) {
  fill: url(#barGradient); /* 使用渐变色 */
}

:deep(.echarts .series-pie) {
  fill: url(#pieGradient); /* 使用渐变色 */
}

:deep(.echarts .gauge-axisLine) {
  stroke: #4169e1; /* 仪表盘线条颜色 */
}

:deep(.echarts .gauge-pointer) {
  fill: #f5f5f5; /* 仪表盘指针颜色 */
}

/* 添加渐变色定义 */
defs {

linearGradient#barGradient {

stop[offset="0%"] {
  stop-color: #4169e1;
}

stop[offset="100%"] {
  stop-color: #2e4053;
}

}
radialGradient#pieGradient {

stop[offset="0%"] {
  stop-color: #4169e1;
}

stop[offset="100%"] {
  stop-color: #2e4053;
}

}
}

</style>
